<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>特例</title>
    <script src="lib/react/react.development.js"></script>
    <script src="lib/react/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function Dialog(props) {
        return (
          <FancyBorder color="blue">
            <h1 className="Dialog-title">{props.title}</h1>
            <p className="Dialog-message">{props.message}</p>
            {props.children}
          </FancyBorder>
        );
      }

      class FancyBorder extends React.Component {
        constructor(props) {
          super(props);
        }
        render() {
          return <div>{this.props.children}</div>;
        }
      }

      class SignUpDialog extends React.Component {
        constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this);
          this.handleSignUp = this.handleSignUp.bind(this);
          this.state = { login: "" };
        }

        render() {
          return (
            <Dialog
              title="Mars Exploration Program"
              message="How should we refer to you?"
            >
              <input value={this.state.login} onChange={this.handleChange} />
              <button onClick={this.handleSignUp}>Sign Me Up!</button>
            </Dialog>
          );
        }

        handleChange(e) {
          this.setState({ login: e.target.value });
        }

        handleSignUp() {
          alert(`Welcome aboard, ${this.state.login}!`);
        }
      }
      // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
      ReactDOM.render(<SignUpDialog />, document.getElementById("root"));
    </script>
  </body>
</html>
